<template>
	<view class="out">
		<checkbox-group @change="onChange">
			<view class="item" v-for="(item, index) in goods" :key="item.id">
				<label>
					<checkbox :value="item.id" /><text class="title">{{item.name}}-{{item.price}}</text>
				</label>
				<text class="del" @click="remove(item.id)">删除</text>
			</view>
		</checkbox-group>
		<view class="card">合计{{checkIds.length}}数量, 价格{{totalPrice}}</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'
	const goods = ref([{
			id: '11',
			name: '小米',
			price: 4500
		},
		{
			id: '22',
			name: '华为',
			price: 5500
		},
		{
			id: '33',
			name: 'oppo',
			price: 4200
		},
		{
			id: '44',
			name: '苹果',
			price: 6000
		},
	])
	const checkIds = ref([])

	function remove(id) {
		goods.value = goods.value.filter(item => item.id !== id)
		checkIds.value = checkIds.value.filter(item=>item !== id)
	}
	
	function onChange(e){
		checkIds.value = e.detail.value
	}
	
	const totalPrice = computed(()=>goods.value.filter(item=>checkIds.value.includes(item.id)).reduce((price, item)=>price+item.price,0))
</script>

<style lang='scss' scoped>
	.out {
		padding: 10px;

		.item {
			padding: 10px 0;

			.del {
				color: #c00;
				margin-left: 30px;
			}
		}
		.card{
			margin-top: 30px;
			border-top: 1px solid #eee;
			padding: 10px 0;
		}
	}
</style>